<template>
  <div>
    <div class="box">
      <div class="item">
        <div class="top">
          <div class="left">价格</div>
          <div class="right">0-4000</div>
        </div>
        <div class="bottom">
          <el-slider v-model="price" :format-tooltip="totalprice"></el-slider>
        </div>
      </div>
      <div class="item">
        <div class="top">住宿等级</div>
        <div class="bottom">
          <el-dropdown>
            <span class="el-dropdown-link">
              不限
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <!-- el-icon-circle-check -->
              <el-dropdown-item
                v-for="(item,index) in grade"
                :key="index"
                icon="iconfont iconcircle "
              >{{item.name}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <div class="item">
        <div class="top">住宿类型</div>
        <div class="bottom">
          <el-dropdown>
            <span class="el-dropdown-link">
              不限
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <!-- el-icon-circle-check -->
              <el-dropdown-item
                v-for="(item,index) in type"
                :key="index"
                icon="iconfont iconcircle "
              >{{item.name}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <div class="item">
        <div class="top">酒店设施</div>
        <div class="bottom">
          <el-dropdown>
            <span class="el-dropdown-link">
              不限
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <!-- el-icon-circle-check -->
              <el-dropdown-item
                v-for="(item,index) in facility"
                :key="index"
                icon="iconfont iconcircle "
              >{{item.name}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <div class="item brand">
        <div class="top">酒店品牌</div>
        <div class="bottom">
          <el-dropdown>
            <span class="el-dropdown-link">
              不限
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <!-- el-icon-circle-check -->
              <div class="filter-view-menu-box">
                <el-dropdown-item
                v-for="(item,index) in Brand"
                :key="index"
                icon="iconfont iconcircle "
              >{{item.name}}</el-dropdown-item>
              </div>
              
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <div class="item">
        <el-button type="primary">撤销条件</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      price: 4000,
      grade: [],
      type: [],
      facility: [],
      Brand: []
    }
  },
  created() {
    this.getHotelsOptions()
  },
  methods: {
    async getHotelsOptions(){
      const {data:res} = await this.$axios.get('/hotels/options')
      this.grade = res.data.levels
      this.type = res.data.types
      this.facility = res.data.assets
      this.Brand = res.data.brands
    },
    totalprice(val){
      return val * 40
    }
  },
}
</script>
<style lang="less" scoped>
.box {
  margin: 20px 0;
  height: 79px;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  .item {
    height: 65px;
    flex: 1;
    border-left: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    padding: 0 20px;
    color: #666;
    justify-content: center;
    &:first-child {
      border: none;
      .bottom {
        display: block;
      }
    }
    .top {
      display: flex;
      justify-content: space-between;
    }
    .bottom {
      height: 38px;
      display: flex;
      align-items: center;
      .el-dropdown {
        width: 100%;
        cursor: pointer;
        span {
          width: 100%;
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
}
.filter-view-menu-box{
  max-height: 230px;
  overflow: auto;
}
.el-dropdown-menu {
  min-width: 200px;
}

/deep/ .el-dropdown-menu__item i {
  margin-right: 10px;
}
</style>
